<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>聚美优品商品分类</title>
        <style type="text/css">
            *{
                margin:0px;
                padding:0px;
            }
            body{
                background-color:#ccc;
            }
            .box{
                width:280px;
                margin:10px auto;
                background: white;
            }
            .box h3{
                height:40px;
                line-height:40px;
                padding-left:15px;
                color:white;
                background:#000;
                font:bold 18px "微软雅黑"；
            }
            .box dt:first-of-type{
                font-size:14px;
                height:30px;
                line-height:30px;
                color:#333;
                padding-left: 30px;
            }


            .box dl dd{
                color:#666;
                font-size:12px;
                height:20px;
                line-height:20px;
                padding-left:30px;
            }
            dl .cream{
                background:url("images/icon_01.gif") no-repeat 5px center;
            }
            dl .cosmetics{
                background:url("images/icon_02.gif") no-repeat 5px center;
            }
            dl .wash{
                background:url("images/icon_03.gif") no-repeat 5px center;
            }
            dl .body_nurse{
                background:url("images/icon_04.gif") no-repeat 5px center;
            }
            dl .gift_box{
                background:url("images/icon_05.gif") no-repeat 5px center;
            }
            dl .cosmetology{
                background:url("images/icon_06.gif") no-repeat 5px center;
            }
            dl .baby_products{
                background:url("images/icon_07.gif") no-repeat 5px center;
            }
            dl .gentleman{
                background:url("images/icon_08.gif") no-repeat 5px center;
            }
            dl .food_health_protection{
                background:url("images/icon_09.gif") no-repeat 5px center;
            }

            .box dl:nth-of-type(-n+8){
                border-bottom: 1px dashed #999999;
            }
            dl{
                padding-bottom: 8px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <h3>全部分类</h3>
            <dl>
                <dt class="cream">护肤</dt>
                <dd>洁面 化妆水 喷雾 美容液</dd>
                <dd>眼部精华 眼膜 面膜 面膜贴</dd>
                <dd>水洗面膜 免洗面膜 精华 精油</dd>
                <dd>凝露 乳液 面霜 日霜 晚霜</dd>
            </dl>
            <dl>
                <dt class="cosmetics">彩妆</dt>
                <dd>卸妆 防晒 隔离 美容液 BB霜 粉底 粉饼</dd>
                <dd>睫毛膏 眼影 唇彩 腮红 眼线笔</dd>
                <dd>底妆 遮瑕 蜜粉 眉笔 美甲</dd>
            </dl>
            <dl>
                <dt class="wash">香氛</dt>
                <dd>男香 女香 小Q装 中性香水</dd>
            </dl>
            <dl>
                <dt class="body_nurse">身体护理</dt>
                <dd>洗发 护发 沐浴 身体乳 手足护理</dd>
                <dd>护手霜 纤体 身体精油 颈部护理</dd>
                <dd>个人护理 卫生用品 脱毛</dd>
            </dl>
            <dl>
                <dt class="gift_box">礼盒套装</dt>
                <dd>护肤套装 身体护理套装 彩妆套装</dd>
                <dd>旅行装 香水套装 男士套装</dd>
            </dl>
            <dl>
                <dt class="cosmetology">美容工具</dt>
                <dd>护肤 彩妆 美发 美体 美甲</dd>
                <dd>美容仪器 其他美容工具</dd>
            </dl>
            <dl>
                <dt class="baby_products">母婴专区</dt>
                <dd>奶粉 尿裤湿巾 母婴洗护</dd>
            </dl>
            <dl>
                <dt class="gentleman">男士专区</dt>
                <dd>洁面 爽肤水 面霜  男香</dd>
                <dd>眼霜 凝胶 乳液 精华 沐浴</dd>
            </dl>
            <dl>
                <dt class="food_health_protection">食品保健</dt>
                <dd>瘦身类 保健类 美容类 食品类</dd>
            </dl>
        </div>
    </body>
</html>
























